<template>
	<view class="image-box">


		<view class="" @click="storyshow = true" style="width: 170rpx">+{{ phoneAreaNumber }}</view>
		<u-popup v-model="storyshow" mode="bottom" width="335px" height="85%" border-radius="40" style="z-index: 99999;">

			<u-search :show-action="false" :placeholder="$t('addAddress.SelectAreaCode')" margin="40rpx 40rpx 0" @clear="clearCode"
				@change="searchCode" v-model='areaCode' :animation="true"></u-search>

			<!-- <uni-combox :candidates="countries1" :placeholder="$t('addAddress.cityTips')" @input='change' v-model="city" ></uni-combox> -->
		<scroll-view scroll-y="true" style="			height: calc(100% - 110px);">
			<view class="exampleBox">

					<view class="example-body" v-for='(item,index) in countries2' :key='index' @click="Selections(item)">

						<view class="">
							{{item.englishName}}
						</view>
						<view class="">
							+{{item.phoneAreaNumber}}
						</view>
					</view>



			</view>
			</scroll-view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		name: "areaCode",
		props: {
			lists: {
				default: () => { info: { createTime: "" } },
				type: Object
			},
			phoneAreaNumber: {
				default: 1,
				type: Number
			},

		},
		data() {
			return {
				storyshow: false,
				countries: [],
				countries1: [],
				countries2: [],
				city: '',
				areaCode: '',
			};
		},

		methods: {
			getAreaId(i) {
				this.$emit("getAreaId", i)
			},
			//获取国际区号
			getAreaCode() {
				this.$u.get('app/country/list').then((res) => {
					console.log('quhao', res.data);
					this.countries = res.data
					this.countries2 = res.data

				});

			},
			Selections(i) {

				this.storyshow = false
				this.phoneAreaNumber = i.phoneAreaNumber
				this.$emit("getAreaId", i.phoneAreaNumber)
			},

			searchCode(val) {
				console.log(val)
				this.countries2 = this.countries.filter(option=>option.englishName.toLowerCase().includes(val)|| option.phoneAreaNumber.toLowerCase().includes(val))

			},
			clearCode() {
				this.areaCode = ''
				this.countries2 = this.countries
			},

			changeNumber(num) {
				this.phoneAreaNumber = num
				console.log(222, this.phoneAreaNumber);
				this.city = ''
			}
		},
		created() {
			this.getAreaCode()

		},

	}
</script>

<style lang="scss" scoped>
	.image-box {
		width: 160rpx;

		.exampleBox {
			overflow: auto;
		}

		.example-body {
			padding:0 20px;
			display: flex;
			font-size: 26rpx;
			justify-content: space-between;
			align-items: center;
		}

		image {
			width: 100%;
			height: 191rpx;
		}

	}
</style>